<template>
  <div class="question-detail container">
    <MatrixBackground />
    <QuestionDetailHeader :detail="subjectDetail.detail" :difficult="subjectDetail.difficult"
      :score="subjectDetail.score" />
    <div class="answer-key-points">
      <AnswerKeyPoints :parse="subjectDetail.parse" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import MatrixBackground from '@/components/common/MatrixBackground.vue';
import QuestionDetailHeader from '@/components/baguwen/QuestionDetailHeader.vue';
import AnswerKeyPoints from '@/components/baguwen/AnswerKeyPoints.vue';
import { subjectApi } from '@/request';
import { ElMessage } from 'element-plus';

const route = useRoute()
const subjectDetail = ref<any>({
  detail: '',
  difficult: 1,
  score: 0,
  parse: ''
})

// 获取题目详情
const getSubjectDetail = async () => {
  try {
    const subjectId = (route.query.subject_id || 1) as number;
    const data = await subjectApi.bgw.getSubjectDetail(subjectId);
    if (data) {
      subjectDetail.value = data
    }
  } catch (error) {
    ElMessage.error('获取题目详情失败')
    console.error('获取题目详情失败：', error)
  }
}

onMounted(() => {
  getSubjectDetail()
})

</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 1;
  color: #fff;
}

.answer-key-points {
  margin-top: 24px;
}
</style>